<template>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" status-icon>
        <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name"/>
        </el-form-item>
        <el-form-item label="图片" prop="img">
            <TukuVue v-model="formData.img1"></TukuVue>
            <TukuVue v-model="formData.img2"></TukuVue>
            <TukuVue v-model="formData.img3"></TukuVue>
        </el-form-item>
        <el-form-item label="分类" prop="parentId">
            <CategoryTreeVue v-model:modelValue="formData.categoryId"></CategoryTreeVue>
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input-number v-model="formData.price" :precision="2" :step="0.1" :min="0"/>
        </el-form-item>
        <el-form-item label="排序" prop="seq">

            <el-input-number v-model="formData.seq" :min="1" :max="99"/>
        </el-form-item>
        <el-form-item label="介绍">
            <EditorVue v-model="formData.brief"></EditorVue>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">
                编辑
            </el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>


<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {productApi} from '@/api'
import TukuVue from '@/components/Tuku.vue'
import {useRouter, useRoute} from 'vue-router'
import EditorVue from '@/components/Editor.vue'
import CategoryTreeVue from "@/components/CategoryTree.vue";

const router = useRouter()
const route = useRoute()
const formRef = ref()

const formData = reactive({
    id: 0,
    name: '',
    img: '',
    img1: '',
    img2: '',
    img3: '',
    seq: 0,
    categoryId: 0,
    price: 0,
    brief: ""
})
const categoryData = ref([])
onMounted(() => {
    formData.id = Number(route.query.id)
    callProductApi()

})
const callProductApi = () => {

    productApi.select.call({id: formData.id}).then((res: any) => {
        formData.name = res[0].name
        let imgArray = res[0].img.split(',')
        formData.img1 = imgArray[0]
        if (imgArray[1] != undefined && imgArray[1] != "") {
            formData.img2 = imgArray[1]
        }
        if (imgArray[2] != undefined && imgArray[2] != "") {
            formData.img3 = imgArray[2]
        }
        formData.seq = res[0].seq
        formData.brief = res[0].brief
        formData.price = res[0].price
        formData.categoryId = res[0].categoryId

    })

}

const formSubmit = () => {

    let imgArray = []
    if (formData.img1 != "") {
        imgArray.push(formData.img1)
    }
    if (formData.img2 != "") {
        imgArray.push(formData.img2)
    }
    if (formData.img3 != "") {
        imgArray.push(formData.img3)
    }
    formData.img = imgArray.join(',')
    productApi.update.call({
        id: formData.id,
        name: formData.name,
        img: formData.img,
        seq: formData.seq,
        categoryId: formData.categoryId,
        price: formData.price,
        brief: formData.brief
    }).then((res: any) => {
        ElMessage.success('编辑成功')
    })
}

const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}

const rules = reactive({
    name: [
        {required: true, message: '商品名称必填', trigger: 'blur'},
    ],


})


</script>